<template>
  <div class="messageBox">
    <div class="container">
      <div class="title">
        <!-- <img
          src="../../assets/img/cancel.png"
          alt=""
          v-if="titleDes.indexOf('删除') !== -1"
        /> -->
        <span>{{ titleDes }}</span>
      </div>
      <div class="content">
        <slot name="content">您确定要{{ titleDes }}吗？</slot>
      </div>
      <div class="btn">
        <el-button type="primary" size="small" @click="messageBoxSave"
          >确定</el-button
        >
        <el-button size="small" @click="messageBoxReceive">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    titleDes: {
      type: String,
      default: "修改密码"
    }
  },

  data() {
    return {
      save: false
    }
  },
  methods: {
    messageBoxSave() {
      this.$emit("messageBoxSave", true)
    },
    messageBoxReceive() {
      this.$emit("messageBoxReceive")
    }
  }
}
</script>

<style lang="scss" scoped>
.messageBox {
  position: absolute;
  // width: 400px;
  height: 300px;
  left: 35%;
  top: 40%;
  background: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  z-index: 2;
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .title {
      display: flex;
      align-items: center;
      margin-top: 10px;
      span {
        font-size: 20px;
        font-weight: 500;
      }
      img {
        width: 40px;
        height: 40px;
      }
    }
    .content {
      padding: 20px;
      overflow: hidden;
    }
    .btn {
      // width: 100%;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
